<template>
    <div class="classify">
        <header>
            <router-link to="/home"><span class="icon">&#xe6b0;</span></router-link>       
            <h1>商品分类</h1>
        </header>
        <div class="main">
            <div class="menu">
                <nav class="menu_ul">
                    <section>
                        <router-link to="/classify/Pharmaceuticals">中西药品</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/NourishingHealth">滋补保健</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/CalciumVitamin">生活家电</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/ContactLenses">隐形眼镜</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/Medical">医疗器械</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/products">成人用品</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/GinsengTea">参茸花茶</router-link>
                    </section>
                    <section>
                        <router-link to="/classify/drugstore">体检套餐</router-link>
                    </section>
                </nav>        
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
   </div>
</template>

<script>
// 引入组件
import common from '../../static/common.css'

export default {

    data() {
      return {
            
        }
    },
    // 注册局部组件
    components: {
        
    },
    methods: {
        active(e){
            // 点击改变currentCont值
            this.currentCont = event.target.innerHTML
        }
       
    },
    mounted() {
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
    height: 1.2rem;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #0093e7;
    line-height: 1.7;
    min-height: 1.25333rem;
    z-index: 2;
}
header h1{
    font-size: .48rem;
    font-weight: normal;
    text-align: center;
    color: #fff;
    line-height: 1.2;
    padding-top: .32rem;
}
.icon{
    font-family: 'iconfont';
    position: absolute;
    left:.1333rem;
    font-size:.88rem;
    color: #fff;
    line-height: 1.2rem;
}
.classify .main{
    overflow: hidden;
    background: #fff;
}
.menu{
    width: 2.5rem;
    height: 15rem;
    position: fixed;
    top: 1.25333rem;
    font-size: .37333rem;
}

.cur{
    width: 2.5333rem;
    height: 1.3333rem;
    text-align: center;
    color: #0695DB;
}
.router-link-active{
    display: inline-block;
    width: 2.5333rem;
    height: 1.3333rem;
    line-height: 1.3333rem;
    text-align: center;
    color: #0695DB;
    background: #fff;
    border: none;
    border-left: .053rem solid #0695DB;
    border-bottom: .0267rem solid #E4E4E4;
    cursor: pointer;
}
section{
    width: 2.5333rem;
    height: 1.3333rem;
    line-height: 1.3333rem;
    text-align: center;
    background: #F8F8F8;
    border: 1px solid #E4E4E4;
    border-top: none;
    border-left: none;
    cursor: pointer;
    font-size: .37333rem;
}
.content{
    width: 7rem;
    height: 15rem;
    position: absolute;
    top: 1.25333rem;
    right: .187rem;
    overflow-y: auto;
    margin-bottom: 2.5rem;
}

@font-face {
  font-family: 'iconfont';  /* project id 283727 */
  src: url('//at.alicdn.com/t/font_0v85q0zr89kvs4i.eot');
  src: url('//at.alicdn.com/t/font_0v85q0zr89kvs4i.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_0v85q0zr89kvs4i.woff') format('woff'),
  url('//at.alicdn.com/t/font_0v85q0zr89kvs4i.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_0v85q0zr89kvs4i.svg#iconfont') format('svg');
}
</style>